<script setup lang="ts">
import {onBeforeUpdate, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import useHomeStore from "@/pinia/homeStore.ts";
import {hospitalInterface} from "@/views/home/Interface/Interface.ts";

const props = defineProps({
  showButton: {
    type: Boolean,
    default: true
  }
})
const router = useRouter()
const homeStore = useHomeStore()

/* 输入框的关键字 */
const hosname = ref<string>('')

/* 获取输入建议的方法， 仅当你的输入建议数据resolve时，通过调用callback(data:[])来返回数据 */
const handleSearch = async (keyword: string, callback: any) => {
  try {
    const hosNameList = await homeStore.searchHospitalNameList(keyword)
    callback(hosNameList)
  } catch (error) {
    ElMessage.warning(error.message)
  }
}
/* 点击选中建议项时触发 */
const handleSelect = (hospital: hospitalInterface) => {
  // 携带参数进程路由跳转
  router.push({name: 'hospital', query: {hoscode: hospital.hoscode}})
}
</script>

<template>
  <div class="search">
    <el-autocomplete placeholder="请输入需要搜索的医院关键字" clearable :trigger-on-focus="false" v-model="hosname" :fetch-suggestions="handleSearch" @select="handleSelect"/>
    <el-button type="primary" icon="Search" v-if="showButton">搜索</el-button>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;

  :deep(.el-autocomplete) {
    width: 800px;
    height: 100%;

    .el-input {
      height: 100%;
    }
  }

  .el-button {
    width: 100px;
    height: 100%;
    font-size: 15px;
    margin-left: 10px;
  }
}
</style>
